<template>
  <div>
    <navigation></navigation>
    <div class="main">
      <div class="left-menu">
        <left-menu :menus="menus"></left-menu>
      </div>
      <div class="right-content">
        <plan-content></plan-content>
      </div>

    </div>

  </div>
</template>

<script>
import navigation from '@/components/Navigation';
import LeftMenu from '@/components/LeftMenu';
import PlanContent from './Content';

export default {
  name: 'plan',
  components: {
    navigation, LeftMenu, PlanContent
  },
  data() {
    return {
      menus: [{
        'code': '1',
        'name': '菜单1',
        'icon': 'el-icon-setting'
      },
      {
        'code': '2',
        'name': '菜单2',
        'icon': 'el-icon-menu'
      },
      {
        'code': '3',
        'name': '菜单3',
        'icon': 'el-icon-document'
      }]
    };
  }
};
</script>

<style scoped>
  .main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 60px;
    overflow: hidden;
  }

  .el-step__main {
    width: auto;
  }

  .left-menu {
    width: 200px;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    border-right: 2px solid #eee;
  }

  .right-content {
    background: #fff;
    position: absolute;
    left: 204px;
    right: 0;
    bottom: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .step {
    background: #dee3e6;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 60px;
    height: 46px;
  }

  .el-step .el-step__title {
    max-width: 100%;
    word-break: break-all;
  }

  .pointer {
    cursor: pointer;
  }

  .bgRed {
    background: red;
  }
</style>
